<template>
  <div class="overall-overview">
    <div class="header">
      <span>分享指标数据概况</span>
      <div class="time-filter">
        <div class="left-text">当前时间</div>
        <div class="vertical-line"></div>
        <el-date-picker
          v-model="currentDate"
          type="daterange"
          range-separator="—"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          value-format="yyyy-MM-dd"
        >
        </el-date-picker>
        <div class="clock"></div>
      </div>
      <div class="time-filter">
        <div class="left-text">对照时间</div>
        <div class="vertical-line"></div>
        <el-date-picker
          v-model="compareDate"
          type="daterange"
          range-separator="—"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          value-format="yyyy-MM-dd"
        >
        </el-date-picker>
        <div class="clock"></div>
      </div>
    </div>
    <div class="visit-times">
      <div
        class="visit-times-item"
        v-for="(item, index) in visitData"
        :key="index"
      >
        <div class="item-title">
          <div
            :style="{
              backgroundColor: item.color,
              width: '10px',
              height: '13px',
            }"
          ></div>
          <span>{{ item.name }}</span>
        </div>
        <div class="item-num">
          <div class="current">
            <div class="currentTitle">当前：</div>
            <div class="num">{{ item.num }}</div>
            <span>{{ item.unit }}</span>
          </div>
          <div class="current">
            <div class="compareTitle">对照：</div>
            <div class="num">{{ item.compareNum }}</div>
            <span>{{ item.unit }}</span>
          </div>
        </div>
        <div class="item-compare">
          <div>
            较对照周期
            <span
              :style="{
                color:
                  item.percentage == '0%'
                    ? '#8896ac'
                    : item.percentage.slice(0, 1) == '-'
                    ? '#00AA13'
                    : '#EC2F17',
              }"
              ><span>{{
                item.percentage.slice(0, 1) == "-" ||
                item.percentage.slice(0, 1) == "0"
                  ? ""
                  : "+"
              }}</span
              >{{ item.percentage }}</span
            >
          </div>
        </div>
      </div>
    </div>
    <div class="header">
      <span>分享 - 场景访问数据趋势</span>
    </div>
    <div class="visit-trending">
      <div class="header-filter">
        <div class="time-filter">
          <span>统计时间</span>
          <el-date-picker
            v-model="currentDateForVisitTrending"
            type="daterange"
            range-separator="—"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            value-format="yyyy-MM-dd"
          >
          </el-date-picker>
        </div>
        <div class="time-filter">
          <span>指标筛选</span>
          <el-select v-model="filterItem" placeholder="请选择">
            <el-option
              v-for="item in visitData"
              :key="item.value"
              :label="item.name"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </div>
      </div>
      <div class="chart-box">
        <LineChart
          v-if="xData"
          :xData="xData"
          :yData="yData"
          :height="chartHeight < 400 ? 400 : chartHeight"
          :currentTag="currentTag"
          :currentTagName="currentTagName"
        ></LineChart>
      </div>
    </div>
  </div>
</template>

<script>
import LineChart from "./LineChart.vue";
import { getEventPageIntervalList, getEventPageTrendList } from "@/api/index";
export default {
  components: {
    LineChart,
  },
  props: {
    selectDate: {
      type: Array,
      default: [],
    },
    compareDateParent: {
      type: Array,
      default: [],
    },
    projectName: {
      type: Array,
      default: [],
    },
  },
  data() {
    return {
      currentTagName: "",
      currentDate: "",
      compareDate: "",
      currentDateForVisitTrending: "",
      visitData: [
        {
          color: "#3589FF",
          name: "分享人数",
          num: "0",
          percentage: "0%",
          unit: "人",
          value: "sharePersonNum",
          compareNum: "0",
        },
        {
          color: "#26C689",
          name: "分享次数",
          num: "0",
          percentage: "0%",
          unit: "次",
          value: "shareNum",
          compareNum: "0",
        },
        {
          color: "#735AFF",
          name: "分享访问人数",
          num: "0",
          percentage: "0%",
          unit: "人",
          value: "visitorNum",
          compareNum: "0",
        },
        {
          color: "#FFA158",
          name: "分享打开次数",
          num: "0",
          percentage: "0%",
          unit: "次",
          value: "shareOpenNum",
          compareNum: "0",
        },
      ],
      yData: [1],
      xData: ["1"],
      currentTag: "visitPersonNumber",
      chartHeight: window.innerHeight - 750,
      filterItem: "", //指标筛选的值
    };
  },
  created() {
    this.currentDate = this.selectDate;
    this.compareDate = this.compareDateParent;
    this.currentDateForVisitTrending = this.selectDate;
    this.filterItem = this.visitData[0].value;
    this.getEventPageIntervalListFn();
    this.getEventPageTrendListFn();
  },
  watch: {
    currentDateForVisitTrending: {
      handler(val) {
        this.getEventPageTrendListFn();
      },
    },
    currentDate: {
      handler(val) {
        this.getEventPageIntervalListFn();
      },
    },
    selectDate: {
      handler(val) {
        this.updateTime();
        this.getEventPageIntervalListFn();
      },
    },
    projectName: {
      handler(val) {
        this.getEventPageIntervalListFn();
        this.getEventPageTrendListFn();
      },
    },
    compareDate: {
      handler(val) {
        this.getEventPageIntervalListFn();
      },
    },
    filterItem: {
      handler(val) {
        switch (val) {
          case "shareOpenNum":
            this.currentTagName = "分享打开次数";
            break;
          case "visitorNum":
            this.currentTagName = "分享访问人数";
            break;
          case "sharePersonNum":
            this.currentTagName = "分享人数";
            break;
          case "shareNum":
            this.currentTagName = "分享次数";
            break;
          default:
            break;
        }
        this.currentTag = val;
        this.getEventPageTrendListFn();
      },
    },
  },
  mounted() {},
  methods: {
    updateTime() {
      this.currentDate = this.selectDate;
      this.currentDateForVisitTrending = this.selectDate;
    },
    async getEventPageIntervalListFn() {
      const params = {
        cardType: this.projectName[0],
        currentStartTime: this.currentDate[0] + " 00:00:00",
        currentEndTime: this.currentDate[1] + " 23:59:59",
        compareStartTime: this.compareDate[0] + " 00:00:00",
        compareEndTime: this.compareDate[1] + " 23:59:59",
        // pageId: this.projectName[1],
        etIdList: [10002, 10003],
      };
      const res = await getEventPageIntervalList(params);
      if (res.code == 200) {
        res.data.forEach((item) => {
          switch (item.dataKey) {
            // 分享打开次数
            case "shareOpenNum":
              this.visitData[3].num = item.currentDataValue;
              this.visitData[3].compareNum = item.compareDataValue;
              this.visitData[3].percentage = item.percentage;
              break;
            // 分享访问人数
            case "visitorNum":
              this.visitData[2].num = item.currentDataValue;
              this.visitData[2].compareNum = item.compareDataValue;
              this.visitData[2].percentage = item.percentage;
              break;
            // 分享人数
            case "sharePersonNum":
              this.visitData[0].num = item.currentDataValue;
              this.visitData[0].compareNum = item.compareDataValue;
              this.visitData[0].percentage = item.percentage;
              break;
            // 分享次数
            case "shareNum":
              this.visitData[1].num = item.currentDataValue;
              this.visitData[1].compareNum = item.compareDataValue;
              this.visitData[1].percentage = item.percentage;
              break;
            default:
              break;
          }
        });
      }
    },
    async getEventPageTrendListFn() {
      const params = {
        cardType: this.projectName[0],
        currentStartTime: this.currentDateForVisitTrending[0] + " 00:00:00",
        currentEndTime: this.currentDateForVisitTrending[1] + " 23:59:59",
        etIdList: [10002, 10003],
        // pageId: this.projectName[1],
        //查询字段 totalPersonNum : 总共人数 openNum : 打开次数  shareNum ：分享次数  visitorNum ：浏览次数 newUsersNum ：新增用户数  stayTime：停留时间
        searchColumn: this.filterItem,
      };
      const res = await getEventPageTrendList(params);
      if (res.code == 200) {
        console.log("res", res);
        let tempxData = [];
        let tempyData = [];
        res.data.forEach((item) => {
          item.statTime = item.statTime.slice(0, 10);
          tempxData.push(item.statTime);
          tempyData.push(Number(item.dataValue));
        });

        this.$nextTick(() => {
          this.xData = tempxData;
          this.yData = tempyData;
        });
        console.log("this.xData", this.xData, this.yData);
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.overall-overview {
  .header {
    display: flex;
    flex-direction: row;
    align-items: center;
    span {
      height: 22px;
      font-family: PingFang-SC;
      font-weight: 800;
      font-size: 20px;
      color: #222222;
      line-height: 22px;
    }
    .time-filter {
      width: 350px;
      margin-left: 22px;
      position: relative;
      height: 36px;
      background-color: #ffffff;
      /* box-shadow: 0px 2px 8px 0px rgba(141, 155, 185, 0.3); */
      border-radius: 6px;
      padding: 7px 10px;
      box-sizing: border-box;
      font-family: PingFangSC, PingFang SC;
      font-weight: 400;
      font-size: 14px;
      color: #000000;
      line-height: 22px;
      display: flex;
      flex-direction: row;
      align-items: center;
      .vertical-line {
        width: 1px;
        height: 11px;
        border: 1px solid #cacaca;
        margin-left: 12px;
      }
      .date-icon {
        position: absolute;
        right: 8px;
        top: 8px;
      }
      .clock {
        width: 17px;
        height: 16px;
        background: url("../../../../assets/images/clock@2x.png") no-repeat;
        background-size: 100% 100%;
        position: absolute;
        right: 15px;
      }
      /deep/ .el-range-editor.el-input__inner {
        border: none;
        height: 36px;
      }
    }
  }
  .visit-times {
    width: 100%;
    border-radius: 8px;
    padding: 12px 13px;
    box-sizing: border-box;
    margin-top: 17px;
    background: #ffffff;
    display: grid;
    /* grid-template-columns: repeat(auto-fill, minmax(287px, 1fr)); */
    grid-template-columns: repeat(auto-fill, minmax(286px, 1fr));
    grid-column-gap: 12px;
    grid-row-gap: 12px;
    margin-bottom: 17px;
    .visit-times-item {
      height: 130px;
      background: #f6f7f8;
      border-radius: 4px;
      padding: 19px 16px;
      box-sizing: border-box;
      .item-title {
        display: flex;
        flex-direction: row;
        align-items: center;

        span {
          margin-left: 9px;
          color: #555555;
          font-weight: 400;
        }
      }
      .item-num {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        margin-top: 10px;
        .current {
          display: flex;
          flex-direction: row;
          align-items: center;
          /* margin-top: 21px; */
        }
        .num {
          font-size: 24px;
          color: #222222;
          font-weight: 800;
        }
        .currentTitle {
          color: #555555;
        }
        .compareTitle {
          /* margin-left: 20px; */
          color: #555555;
        }
        span {
          color: #8896ac;
          margin-left: 10px;
          font-size: 12px;
        }
      }
      .item-compare {
        margin-top: 14px;
        font-weight: 200;
        font-size: 15px;
        div {
          color: #8896ac;
        }
        span {
          font-size: 15px;
          font-weight: 600;
        }
      }
    }
  }
  .visit-trending {
    width: 100%;
    border-radius: 8px;
    padding: 24px;
    box-sizing: border-box;
    margin-top: 17px;
    background: #ffffff;
    .header-filter {
      display: flex;
      flex-direction: row;
      .time-filter {
        margin-right: 22px;
        span {
          margin-right: 10px;
        }
        /deep/ .el-date-editor--daterange.el-input__inner {
          background: #fafbfe;
        }
        /deep/ .el-range-editor .el-range-input {
          background: #fafbfe;
        }
        /deep/ .el-range-editor.el-input__inner {
          border: 1px solid #e9e9e9;
          height: 36px;
        }
        /deep/ .el-date-editor .el-range-separator{
          line-height: 28px;
        }
        /deep/ .el-input--suffix .el-input__inner {
          height: 36px;
          background: #fafbfe;
        }
      }
    }
    .chart-box {
      margin-top: 32px;
    }
  }

  /deep/ .el-date-editor .el-range-separator {
    width: 10%;
    /* line-height: 28px; */
  }
  /deep/ .el-date-editor .el-range__icon {
    display: none;
  }
  /deep/ .el-date-editor--daterange.el-input__inner {
    width: 250px;
  }
}
</style>
